<!DOCTYPE html>
<html lang="en">
<!--
  _   _   _   _   _     _   _   _   _   _   _   _  
 / \ / \ / \ / \ / \   / \ / \ / \ / \ / \ / \ / \ 
( T | w | e | e | t ) ( O | l | y | m | p | i | c )
 \_/ \_/ \_/ \_/ \_/   \_/ \_/ \_/ \_/ \_/ \_/ \_/ 

-->
	<head>
        <title>Tweet Olympic 2012 : the twitter experience for olympic game</title>
        <meta charset="utf-8">
		<meta name="description" content="Tweet Olympic 2012 : the twitter experience for olympic game">
		<meta name="keywords" content="Tweet, Olympic, Twitter, Webgl, Experiment" />
		<meta name="author" content="David Ronai, Clement Pavageau" />

		<!-- android / ios -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">

		<!-- favicons -->
        <link rel="Shortcut Icon" type="image/ico" href="img/favicon.png">
			
		<!-- css // stylized my page ! -->
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
		<link rel="stylesheet"  href="css/colorpicker.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

		<!-- facebook metadata -->
		<meta property="og:title" content="Tweet olympic" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://tweetolympic.com" />
		<meta property="og:image" content="http://tweetolympic.com/img/logo_facebook.com" />
		<meta property="og:site_name" content="Tweet olympic" />
		<meta property="fb:admins" content="1836181715" />
    </head>
    <body>
		<!-- Mother of Facebook script -->
		<div id="fb-root"></div>
		<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=220813356385"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
		
		<div id="global">
			<div id="wrapMin">
				Attention votre fenetre est trop petite pout l'experience. Agrandissez la fenetre pour continuer!
			</div>
			<div id="wrap">
				<header>
					<h1><span><a href="/" title="Tweet olympic">Tweet Olympic</a></span></h1>
					<div class="twitter social">
						<a href="https://twitter.com/share" class="twitter-share-button" data-via="davidronai" data-hashtags="TweetOlympic">Tweet</a>
						<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
					</div>
					<div class="fb-like social" data-href="http://www.facebook.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="true"></div>
					<div id="sound">
						<a href="#">sound</a>
					</div>
					<div class="author">A Google Chrome Experiment created by <a href="https://twitter.com/#!/Makio64" target="_blank" title="My dev twitter !">@Makio</a> and <a target="_blank" href="https://twitter.com/#!/kokopako" title="His DA twitter !">@Kokopako</a></div>
					
				</header>
				<section>
					<div id="light">
						<ul>
							<li><label>Ambient Ligth Color:</label><input id="ambient" type="text" value="111111" class="colorPicker" /></li>
							<li><label>Add : Remove lights:</label><input id="create" value="create" type="submit" /><input id="removelight" value="delete" type="submit" /></li>
							<li><label>Selected Light</label>
								<select>
									<option value="0">light 0</option>
								</select>
							<li><label>Position x/y/z:</label><input id="positionX" type="text" />/<input id="positionY" type="text" />/<input id="positionZ" type="text" /></li>
							<li><label>Look At x/y/z:</label><input id="lightLookX" type="text" />/<input id="lightLookY" type="text" />/<input id="lightLookZ" type="text" /></li>
							<li><label>Color:</label><input id="color" type="text" value="FFFFFF" class="colorPicker" /></li>
							<li><label>Intensity:</label><input id="intensity" type="text" value="1" /></li>
							<li><label>Cast shadow:</label><input id="castShadow" type="checkbox"/></li>
							<li><label>Shadow darkness:</label><input id="darkness" type="text" value="1" /></li>
							<li><label>Shadow camera near:</label><input id="cameraNear" type="text" value="1" /></li>
							<li><label>Shadow camera far:</label><input id="cameraFar" type="text" value="1" /></li>
							<li><label>Shadow camera fov:</label><input id="cameraFov" type="text" value="1" /></li>
							<li><label>Shadow map width:</label><input id="shadowMapWidth" type="text" value="1024" /></li>
							<li><label>Shadow map height:</label><input id="shadowMapHeight" type="text" value="1024" /></li>
							<li><label>Exponent:</label><input id="exponent" type="text" value="10" /></li>
							</ul>
					</div>
					<div id="controller">
						<ul>
							<li><label>Camera Manual:</label><input id="CameraManual" type="checkbox" /></li>
							<li><label>Camera x/y/z:</label><input id="cameraX" type="text" class="camera" />/<input id="cameraY" class="camera" type="text" />/<input id="cameraZ" type="text" class="camera" /></li>
							<li><label>Camera Rotation x/y/z:</label><input id="cameraRX" type="text" class="camera" />/<input id="cameraRY" class="camera" type="text" />/<input id="cameraRZ" type="text" class="camera" /></li>
							<li><label>Camera Look At:</label><input id="lookX" type="text" class="camera" />/<input id="lookY" class="camera" type="text" />/<input id="lookZ" type="text" class="camera" /></li>
						</ul>
					</div>
					<div id="cloud">
						<div class="container">
							<div id="cloud1" class="cloud"><img src="img/cloud1.png" alt="cloud"/></div>
							<div id="cloud2" class="cloud"><img src="img/cloud2.png" alt="cloud"/></div>
							<div id="cloud3" class="cloud"><img src="img/cloud3.png" alt="cloud"/></div>
							<div id="cloud4" class="cloud"><img src="img/cloud2.png" alt="cloud"/></div>
							<div id="cloud5" class="cloud"><img src="img/cloud3.png" alt="cloud"/></div>
						</div>
					</div>
					<div id="account">
						<div id="participate">
							<h3>PARTICIPATE NOW!</h3>
							<div class="contain">
								<input id="accountInput" type="text" value="Enter a twitter account" />
								<div><span><a href="#">GO!</a></span></div>
							</div>
						</div>
					</div>
					<div id="back"><a href="#" title="back to home">BACK</a></div>
					<div id="selection">
						<h3>CHOOSE YOUR DISCIPLINE!</h3>
						<img id="arrow" alt=">" src="img/arrowSelection.png" />
						<div class="relative">
							<div class="contain">
								<a href="#" title="start" id="raceButton"><img src="img/iconRace.png" alt="race" /></a>
								<a href="#" title="start" id="boxeButton"><img src="img/iconBoxe.png" alt="boxe" /></a>
								<a href="#" title="start" id="jumpButton"><img src="img/iconJump.png" alt="jump" /></a>
							</div>
							<div id="raceInfo" class="info"><h4>SPRINT</h4><p>More tweet you get and more faster you are!</p></div>
							<div id="boxeInfo" class="info"><h4>BOXE</h4><p>Fight with your tweets and defeat your opponents!</p></div>
							<div id="jumpInfo" class="info"><h4>HIGHT JUMP</h4><p>Jump with the help of your followers!</p></div>
						</div>
					</div>
					<div id="race">
						<div id="go">
							<div>3</div>
							<div>2</div>
							<div>1</div>
							<div>GO!</div>
						</div>
						<div class="relative">
							<div class="infos">
								<div><img alt="" id="avatarInfo" src="img/distance.png" />2nd</div>
								<div><img alt="" src="img/chrono.png" />0s</div>
								<div><img alt="" src="img/distance.png" />0m</div>
							</div>
							<div class="preview">
								<div class="relative">
									
								</div>
							</div>
						</div>
					</div>
					<div id="loader"><div><div></div></div></div>
				</section>
			</div>
		</div>
		
        <script type="text/javascript" src="js/lib/threejs/Three.js"></script>
        <script type="text/javascript" src="js/lib/threejs/ColladaLoader.js"></script>
		
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.easing.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.colorpicker.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.color.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.preloader.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.konami.js"></script>
		<script type="text/javascript" src="js/lib/jquery/jquery.getImageData.js"></script>
		
		<script type="text/javascript" src="js/lib/tweenlite/plugins/CSSPlugin.min.js"></script>
		<script type="text/javascript" src="js/lib/tweenlite/easing/EasePack.min.js"></script>
		<script type="text/javascript" src="js/lib/tweenlite/TweenLite.min.js"></script>
		
		<script type="text/javascript" src="js/lib/sound/buzz.min.js"></script>
		
		<script type="text/javascript" src="js/lib/utils/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/lib/utils/Detector.js"></script>
		<script type="text/javascript" src="js/lib/utils/Stats.js"></script>
		
		<script type="text/javascript" src="js/tweetOlympic.js"></script>
		<script type="text/javascript" src="js/objects3D/Mobile.js"></script>
		
		<script type="text/javascript" src="js/core/RessourceManager.js"></script>
		<script type="text/javascript" src="js/core/ModelLoader.js"></script>
		<script type="text/javascript" src="js/core/Abstract3DScene.js"></script>
		<script type="text/javascript" src="js/core/SceneTraveler.js"></script>
		
		<script type="text/javascript" src="js/scenes/ConnexionScene.js"></script>
		<script type="text/javascript" src="js/scenes/SportSelectionScene.js"></script>
		<script type="text/javascript" src="js/scenes/RaceScene.js"></script>
		<script type="text/javascript" src="js/scenes/BoxeScene.js"></script>
		
		<script type="text/javascript" src="js/main.js"></script>
    </body>
</html>
